<template>
	<view class="body">
		<uni-nav-bar
		fixed="true"
		left-text="返回" 
		leftIcon="left"
		title="修改密码" 
		height="130rpx"
		/>
		<view class="content">
			<view class="oldpass w">
				<text class="iconfont icon-lock"></text>
				<input type="password" value="" placeholder="请输入旧密码" v-model="oldpass"/>
			</view>
			<view class="pass w">
				<text class="iconfont icon-lock"></text>
				<input type="password" value="" placeholder="请输入新密码" v-model="pass"/>
				
			</view>
			<!-- 确认密码 -->
			<view class="affirm w">
				<text class="iconfont icon-lock"></text>
				<input type="password" value="" placeholder="请再输入新密码" v-model="passto"/>
				
			</view>
		</view>
		<button type="default" class="go" @click="getchangePass">提交</button>
	</view>
</template>

<script>
	import {changePass} from '../../api/user.js'
	export default{
		data(){
			return{
				pass:'',
				oldpass:'',
				passto:''
			}
		},
		methods:{
			async getchangePass(){
				if(this.oldpass==''){
					uni.showToast({
						title:'请输入旧密码密码'
					})
				}else if(this.pass==''){
					uni.showToast({
						title:'请输入新密码'
					})
					
				}else if(this.passto==''){
					uni.showToast({
						title:'请再次输入密码'
					})
					
				}
				else if(this.pass!=this.passto){
					uni.showToast({
						title:'两次密码不一致'
					})
				}else{
				let params={
					oldpass:this.oldpass,
					pass:this.pass
				}
				let res = await changePass(params)
				if(res.errCode==10000){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			}
			}
		}
	}
</script>

<style lang="less">
	/deep/.uni-navbar--border[data-v-6bda1a90]{
		border-bottom-style:none
	}
	button::after {
		border: none;
	}
	.body{
		width: 750rpx;
		height: 100vh;
		background-color:#f6f5f5 ;
		.content{
			width: 100%;
			height: 322rpx;
			background-color: #FFFFFF;
			margin-bottom: 93rpx;
			padding: 0 26rpx;
			box-sizing: border-box;
			.w{
				display: flex;
				justify-content: space-between;
				align-items: center;
				input{
					width: 91%;
					height: 100%;
				}
				text{
					color: #cb6d56;
					font-size: 40rpx;
				}
			}
			.oldpass{
				width: 100%;
				height: 94rpx;
				border-bottom: 1rpx solid #efefef;
				input{
					width: 91%;
					height: 100%;
				}
				text{
					color: #cb6d56;
					font-size: 40rpx;
				}
			}
			.pass{
				width: 100%;
				height: 104rpx;
				border-bottom: 1rpx solid #efefef;
				input{
					width: 91%;
					height: 100%;
				}
				button{
					width: 30%;
					height: 90rpx;
					padding: 0;
					margin: 0;
					font-size: 30rpx;
					line-height: 90rpx;
					color: #7898c8;
					background-color: #fff;
					border: none;
				}
				text{
					color: #32cb65;
					font-size: 40rpx;
				}
			}
			.affirm{
				width: 100%;
				height: 120rpx;
				input{
					width: 91%;
					height: 100%;
				}
				text{
					font-size: 40rpx;
					color: #32cb65;
				}
				
			}
		}
		.go{width: 512rpx;
			height: 76rpx;
			background-color: #1f8fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			color: #FFFFFF;
		}
	}
</style>
